<template>
	<view class="cal-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/dkBg.png)'}]">
		<cu-custom :isBack="true" :isWhiteBack="true" style="background-color: transparent;">
			<block slot="backText" ></block>
			<block slot="content">
				<view class="custom-white-title">打卡详情</view>
			</block>
		</cu-custom>
		<view class="padding-top-100 padding-left-52">
			<view class="cal-title">微废处理打卡</view>
			<view class="padding-top-sm">
				<image src="https://txr001.zthj.net/static/img/sTime.png" class="img-32 text-img-center"></image>
				<text class="cal-time">11月12日——11月13日</text>
			</view>
			<view class="padding-top-24 text-white text-sm">打卡内容：</view>
			<view class="padding-top-16 text-white text-sm">
				<view>1、在规定时间内打卡</view>
				<view>2、打卡地点为微废处理车间</view>
				<view>3、上传3张微废处理照片</view>
			</view>
		</view>
		<view class="margin-top-48 padding-left-32 padding-right-32">
			<view class="clock-info-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/clockBg.png)'}]">
				<view class="padding-left-32 padding-top-32 padding-right-32">
					<view class="flex align-center justify-between">
						<view>
							<view class="text-df text-white text-bold-500">打卡时间：</view>
							<view class="text-sm text-white padding-top-16">
								2023-05-01——2023-05-30
							</view>
						</view>
						<view class="text-df text-white text-bold-500">共需打卡12天</view>
					</view>
					<view class="margin-top-32">
						<view class="flex align-center justify-start" style="overflow-y: scroll;">
							<view :class="selDay==index?'selDay':'unselDay'" 
							v-for="(item,index) in 5" :key="index" @click="selDay=index">  
								<view class="text-sm" :class="selDay==index?'text-white':'text-black'">5月10日</view>
								<view class="padding-top-sm" :class="selDay==index?'text-white':'text-black'">
									<text class="text-48 text-bold-600">3</text>
									<text class="text-sm">人</text>
								</view>
								<view  class="text-sm" :class="selDay==index?'text-white':'text-black'">周一</view>
							</view>
						</view>
					</view>
					
					<view class="flex margin-top-52 text-center">
						<view class="flex-sub" :class="curTab==1?'selClock':'unselClock'" @click="curTab=1">
							已打卡(3)
							<view :class="curTab==1?'selClockBottom':''"></view>
						</view>
						<view class="flex-sub" :class="curTab==2?'selClock':'unselClock'" @click="curTab=2">
							未打卡(4)
							<view :class="curTab==2?'selClockBottom':''"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="padding-left-32 padding-right-32 u-bg-white" style="margin-top: -35rpx;">
				<view class="padding-bottom-48 solids-bottom margin-bottom-48" v-if="curTab==1" v-for="(info,index) in 2" :key="index">
					<view class="flex align-center justify-start">
						<view>
							<image src="https://txr001.zthj.net/static/img/avatar.png" class="img-100"></image>
						</view>
						<view class="padding-left-24">
							<view class="name">某某某</view>
							<view class="dept">品牌部</view>
						</view>
					</view>
					<view class="padding-top-32 content text-df">微废处理1000吨。</view>
					<view class="padding-top-32">
						<image src="https://txr001.zthj.net/static/img/time.png" class="img-32 text-img-center"></image>
						<text class="padding-left-16 content text-sm">时间</text>
						<text class="padding-left-28 content text-sm">5月27日  12:30:22</text>
					</view>
					<view class="padding-top-18">
						<image src="https://txr001.zthj.net/static/img/address.png" class="img-32 text-img-center"></image>
						<text class="padding-left-16 content text-sm">地点</text>
						<text class="padding-left-28 content text-sm">某某某3厂</text>
					</view>
					<view class=" padding-top-32 flex align-center justify-start" style="overflow-x: scroll;">
						<view class="margin-right-32" v-for="(info,index) in 4" :key="index">
							<image src="https://txr001.zthj.net/static/img/very.png" class="img-280"></image>
						</view>
					</view>
					
					<view class="clock-opr-content flex">
						<view class="flex-sub text-center border-right">
							<image src="https://txr001.zthj.net/static/img/pass.png" class="img-48"></image>
							<view class="text-sm text-black">通过</view>
						</view>
						<view class="flex-sub text-center">
							<image src="https://txr001.zthj.net/static/img/unpass.png" class="img-48"></image>
							<view class="text-sm text-black">异常</view>
						</view>
					</view>
				</view>
				<view v-if="curTab==2" v-for="(info,index) in 6" :key="index" 
				class="flex align-center justify-start padding-bottom-48 solids-bottom margin-bottom-48">
					<view>
						<image src="https://txr001.zthj.net/static/img/avatar.png" class="img-100"></image>
					</view>
					<view class="padding-left-24">
						<view class="text-0101 text-df">某某某</view>
						<view class="text-0101 text-sm padding-top-12">品牌部</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selDay:0,
				curTab:1
			}
		},
		onLoad(){
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.cal-content{
		background-size: 100% 100%;
		width: 100%;
		height: 776rpx;
		.cal-title{
			font-size: 56rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
		.cal-time{
			padding-left: 8rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			vertical-align: middle;
		}
		.clock-info-content{
			// background: linear-gradient(180deg, #3D98FF 0%, #fff 100%);
			border-radius: 48rpx;
			background-size: 100% 100%;
			width: 100%;
			height: 520rpx;
			background-color: #FFFFFF;
			// padding: 32rpx;
			z-index: 999;
		}
		.selDay{
			background-image: url("https://txr001.zthj.net/static/img/selDay.png");
			background-size: 100% 100%;
			min-width: 140rpx;
			height: 174rpx;
			margin-right: 20rpx;
			padding: 12rpx 0;
			text-align: center;
		}
		.unselDay{
			min-width: 140rpx;
			height: 164rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-right: 20rpx;
			padding: 12rpx 0;
			text-align: center;
		}
		.selClock{
			font-size: 32rpx;
			font-weight: 600;
			color: #24458E;
		}
		.unselClock{
			font-size: 32rpx;
			font-weight: 600;
			color: #000000;
		}
		.selClockBottom{
			margin-top: 8rpx;
			width: 96rpx;
			height: 8rpx;
			background: #24458E;
			border-radius: 4rpx;
			margin-left: 110rpx;
		}
		.clock-opr-content{
			margin-top: 64rpx;
			padding: 14rpx 0 16rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 12rpx 4rpx rgba(36,69,142,0.1);
			border-radius: 32rpx;
		}
	}
	.border-right{
		border-right: 2rpx solid #D9D9D9;
	}
</style>